{% stylesheet %}
.block_search_term_content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.block_search_term_content .search_term-item {
  font-size: 14px;
  line-height: 26px;
  min-height: 20px;
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 46px;
  background-color: var(--secondary_button_bg);
  color: var(--secondary_button_color);
  border: 1px solid var(--secondary_button_color);
  margin-bottom: 12px;
  margin: 6px;
}

.block_search_term_content .search_term-item:hover {
  background: var(--secondary_button_color);
  color: #fff;
}

{% endstylesheet %}


<div class="block_collection_nav" id="block_collection_nav_{{ block.id }}"> 
  <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
			{% include 'block_title', title:section.settings.title , detail:section.settings.detail %}
      <div class="block_search_term_content">
        {% for block in section.blocks %}
					{% if block.link.url %}
						{% assign href = block.link | setUrlDataFrom:data_from %}
					{% else %}
						{% assign href = "" %}
					{% endif %}
					{%- capture searchHref -%}/search?q={{block.serach_text}}{%- endcapture -%}
        <a class="search_term-item" href="{{href | default : searchHref }}">{{block.serach_text}}</a>
        {% endfor %}

      </div>

  </div>
</div>


{% schema %}
{
	"tag": "section",
	"icon": "icon-Search",
	"class": "block_search_term",
	"is_global": false,
	"name": {
		"zh_CN": "搜索词",
		"en_US": "Search term"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			}
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "关键词",
				"en_US": "Keywords"
			},
			"type": "searc-item",
			"settings": [
				{
					"type": "card_input",
					"label": {
						"zh_CN": "关键词",
						"en_US": "Keywords"
					},
					"id": "serach_text",
					"default": ""
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump links"
					},
					"id": "link",
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"info": {
						"zh_CN": "未选择链接的关键词将默认为搜索页",
						"en_US": "Keywords with no selected links will default to the search page"
					}
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Hot Searches",
			"detail": ""
		},
		"blocks": [
			{
				"serach_text": "Keyword A",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "searc-item"
			},
			{
				"serach_text": "Keyword B",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "searc-item"
			},
			{
				"serach_text": "Keyword C",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "searc-item"
			}
		]
	}
}
{% endschema %}